let { src, dest, series, parallel, watch } = require('gulp')

// 压缩 html 文件
let htmlmin = require('gulp-htmlmin')

// 处理 html 模块
let htmlModule = require('gulp-file-include')

// 压缩 css 文件
let csso = require('gulp-csso')

// 压缩 js 文件
let uglify = require('gulp-uglify')

// 运行 网络服务器 插件
let connect = require('gulp-connect')

// 配置路径
let configPath = {
    htmlUrl: './Ali_project/',
    common: './Ali_project/common/',
    cssUrl: './Ali_project/css/',
    jsUrl: './Ali_project/js/',
    thirdUrl: './Ali_project/libs/',
    imgUrl: './Ali_project/imgs/',
    audioUrl: './Ali_project/mp3/',
    fonts: './Ali_project/fonts/',
    layui: './Ali_project/layui/',
    placePath: './dist'
}

// html
function html() {
    return src(`${configPath.htmlUrl}*.html`)
        // 处理 html 模块
        .pipe(htmlModule({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(dest(configPath.placePath))
        // 重载
        .pipe(connect.reload())
}

// 公共 html结构
function publicHtml() {
    return src(`${configPath.common}*`)
        .pipe(dest(`${configPath.placePath}/common`))
        .pipe(connect.reload())
}

// css
function css() {
    return src(`${configPath.cssUrl}*.css`)
        .pipe(csso())
        .pipe(dest(`${configPath.placePath}/css`))
        .pipe(connect.reload())
}

// js
function js() {
    return src(`${configPath.jsUrl}*.js`)
        .pipe(uglify())
        .pipe(dest(`${configPath.placePath}/js`))
        .pipe(connect.reload())
}

// 第三方插件
function copyPlug() {
    return src(`${configPath.thirdUrl}*`)
        .pipe(dest(`${configPath.placePath}/libs`))
        .pipe(connect.reload())
}

// 插件字体
function copyFonts() {
    return src(`${configPath.fonts}*`)
        .pipe(dest(`${configPath.placePath}/fonts`))
        .pipe(connect.reload())
}

// layui 框架
function copylayui() {
    return src(`${configPath.layui}**`)
        .pipe(dest(`${configPath.placePath}/layui`))
        .pipe(connect.reload())
}

// 图片
function copyImg() {
    return src(`${configPath.imgUrl}*`)
        .pipe(dest(`${configPath.placePath}/imgs`))
        .pipe(connect.reload())
}

// 音频
function copyVido() {
    return src(`${configPath.audioUrl}*`)
        .pipe(dest(`${configPath.placePath}/mp3`))
        .pipe(connect.reload())
}

// 开发模式，启动服务
function watchList() {
    // watch 监听 globs 并在文件发生改变的时候做出改变
    watch(`${configPath.htmlUrl}*.html`, series(html))
    watch(`${configPath.common}*.html`, series(publicHtml))
    watch(`${configPath.cssUrl}*.css`, series(css))
    watch(`${configPath.jsUrl}*.js`, series(js))
    watch(`${configPath.thirdUrl}*.js`, series(copyPlug))
    watch(`${configPath.imgUrl}*`, series(copyImg))
    watch(`${configPath.audioUrl}*`, series(copyVido))
}

let serverOptions = {
    name: 'development',
    root: configPath.placePath,
    host: '127.0.0.1',
    port: 1022,
    livereload: true
}

function server() {
    connect.server(serverOptions)
}

function init() {
    return [html, css, js, copyPlug, copyImg, copyVido, publicHtml, copyFonts, copylayui]
}

exports.server = series(...init(), parallel(server, watchList))

// 打包 所有任务，使用 gulp命令 自动执行
exports.default = series(html, css, js, copyPlug, copyImg, copyVido, publicHtml, copyFonts, copylayui)